<!Doctype html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
	<meta charset="utf-8"/>
<!--
	<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
-->
	<title>注册</title>
	<link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
	<link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />
	<link rel="shortcut icon"  href="favicon.ico">
	<script th:src="@{jquery-3.1.1.js}" type="text/javascript"></script>
	<script th:src="@{jquery.validate.js}" type="text/javascript"></script>
	<script th:src="@{messages_zh.js}"></script>
	<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>


	<style th:fragment="placeholder">
		:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
			color: gray; opacity:1;
		}

		::-moz-placeholder { /* Mozilla Firefox 19+ */
			color:gray;opacity:1;
		}

		input:-ms-input-placeholder{
			color: gray;opacity:1;
		}

		input::-webkit-input-placeholder{
			color: gray;opacity:1;
		}

		input::-webkit-input-placeholder { /* WebKit browsers*/
			　　color:#999;font-size:18px;
			　　}
		input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/
			　　color:#999;font-size:18px;
			　　}
		input::-moz-placeholder {  /* Mozilla Firefox 19+*/
			　　color:#999;font-size:18px;
			　　}
		input:-ms-input-placeholder { /* Internet Explorer 10+*/
			　　color:#999;font-size:18px;
		}
	</style>

	<style>
		.login-top{
			background-color: white;
			padding: 40px 60px;
			text-align: center;
			/*border: 2px solid cadetblue;*/
			border-radius:25px;
			/*box-shadow: 5px 5px 2px #888888;*/
		}
		.login-top h1 {
			text-align: center;
			font-size: 27px;
			font-weight: 500;
			color: black;
			margin: 0px 0px 20px 0px;
		}
		.login-top input[type="number"] {
			outline: none;
			font-size: 18px;
			color:black;
			font-family: Monaco;
			width: 310px;
			border: 1px solid black;
			height: 46px;
			margin: 0px 0px 15px 0px;
			padding: 10px 15px;
			-webkit-appearance: none;
			background-color: white;
		}
		.login-top input[type="text"] {
			outline: none;
			font-size: 18px;
			color:black;
			font-family: Monaco;
			width: 310px;
			border: 1px solid black;
			height: 46px;
			margin: 0px 0px 15px 0px;
			padding: 10px 15px;
			-webkit-appearance: none;
			background-color: white;
		}
		.login-top input[type="password"] {
			outline: none;
			font-size: 18px;
			color:black;
			font-family: Monaco;
			width: 310px;
			border: 1px solid black;
			height: 46px;
			margin: 0px 0px 15px 0px;
			padding: 10px 15px;
			-webkit-appearance: none;
			background-color: white;
		}
		.error_style{
			color:red
		}
	</style>
	<script>
        $(function(){
            $("#banner li a:not(#drop)").mouseover(function(){
                $(this).css("color","black");
            });
        });
        $(function(){
            $("#banner li a:not(#drop)").mouseout(function(){
                $(this).css("color","white");
            });
        });
	</script>

</head>





<body>


<script type="text/javascript">
    $().ready(function() {
        $("#registerform").validate({
            errorClass:"error_style"
        });
    });

    $(function() {
        $("input").focus(function () {
            //让当前得到焦点的文本框改变其背景色
            $(this).css("borderColor", " #0FF ");
        });
    });

    $(function() {
        $("input:submit").mouseover(function () {
            //让当前得到焦点的文本框改变其背景色
            $(this).css("backgroundColor", "rgba(48,48,48,0.81)");
        });
    });

    $(function() {
        $("input:submit").mouseout(function () {
            //让当前得到焦点的文本框改变其背景色
            $(this).css("backgroundColor", "black");
        });
    });

    $(function() {
        $("input").blur(function () {
            //让当前得到焦点的文本框改变其背景色
            $(this).css("borderColor", " #888 ");
        });
    });


</script>




<div class="container">
	<th:block th:include="/index :: header"></th:block>

	<div  style="background-image: url(login1.jpg); width: 100%;height: 650px;background-size: 100% 100%"  align="center" >
		<div style="padding-top: 50px;width:490px;height:50%;margin: 0 auto;" >
			<span th:text="${message}" style="color:red"></span><br><br>
			<div class="login-top">
			<form th:action="@{/Register}" role="form" id="registerform" method="post">
				<h1>注册</h1>
				<input type="text" id="name" name="name" placeholder="姓名/至少两个字符" th:value="${student.name}" required minlength="2" />
				<input name="sno" placeholder="学号/请输入数字" th:value="${student.sno}==0?null:${student.sno}"  required type="number"/>
				<input type="password"  id="password" name="password" placeholder="密码/至少5个字母或数字" th:value="${student.password}"   required minlength="5" />
				<input type="password"  id="confirm_password" name="confirm_password" placeholder="确认密码" th:value="${student.password}"    required  minlength="5"  equalTo="#password" />
				<input type="text" name="macID"  placeholder="MAC/形如:f4:8e:92:32:be:db"    required/>
				<div>
				<input type="radio"  name="gender" value="男" checked/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="radio"  name="gender" value="女" />女
				</div>
				<input type="submit" id="submit" class="btn btn-default " style="height:46px;width:306px;background: black;color: white;font-size:20px;" value="注&nbsp;&nbsp;册" />
			</form>
		</div>
		</div>
	</div>
</div>

</body>
</html>